<div class="menu_management">
    <div nz-row nzGutter="16" class="row_1">
        <div nz-col nzSpan="9" class="row_2">
            <button nz-button nzType="primary" (click)="handleShowModal()" *ngIf="bornRole.add">
                <i nz-icon nzType="plus"></i>新增
            </button>
            <button nz-button nzType="" (click)="handleShowModal(2)" [disabled]="deleteIds.length !== 1"
                [class]="deleteIds.length !== 1?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'" *ngIf="bornRole.edit">
                <i nz-icon nzType="edit"></i>修改
            </button>
            <button nz-button nzType="" (click)="handleDelete()" [disabled]="deleteIds.length === 0"
                [class]="deleteIds.length === 0?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'" *ngIf="bornRole.del">
                <i nz-icon nzType="delete"></i>删除
            </button>
            <button nz-button nzType=""><i nz-icon nzType="download"></i>导出</button>
        </div>
        <div nz-col nzSpan="7"></div>
        <div nz-col nzSpan="4">
            <nz-range-picker nzDropdownClassName="date-range" ngModel (ngModelChange)="handleDate($event)"></nz-range-picker>
        </div>
        <div nz-col nzSpan="4">
            <input appHotSearch (hotSearchEmit)="getList()" nz-input placeholder="模糊搜索" [(ngModel)]="searchKey" />
        </div>
        <!-- <div nz-col nzSpan="4" class="operate_btn">
            <button nz-button nzType="" (click)="handleSearch()">
                <i nz-icon nzType="search"></i>搜索
            </button>
        </div> -->
    </div>
    <div nz-row class="row_3">
        <nz-table #expandTable [nzData]="listOfMapData" [nzFrontPagination]="false" [nzBordered]="true" nzSize="small">
            <thead>
                <tr>
                    <th nzShowCheckbox [(nzChecked)]="isAllCheck" [nzIndeterminate]="isIndeterminate"
                        (nzCheckedChange)="checkAll($event)"></th>
                    <th>菜单名称</th>
                    <th>图标</th>
                    <th>排序</th>
                    <th>路由地址</th>
                    <th>权限标识</th>
                    <!-- <th>组件路径</th> -->
                    <th>是否缓存</th>
                    <th>是否可见</th>
                    <th>创建日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <ng-container *ngFor="let data of expandTable.data">
                    <ng-container *ngFor="let item of mapOfExpandedData[data.id]">
                        <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
                            <td [nzShowCheckbox]="true" [(nzChecked)]="mapOfCheckedId[item.id]"
                                (nzCheckedChange)="checkItem(item, item.id, item.pid)"></td>
                            <td [nzIndentSize]="item.level * 20" [nzShowExpand]="!!item.children"
                                [(nzExpand)]="item.expand"
                                (nzExpandChange)="collapse(mapOfExpandedData[data.id], item, $event)">
                                {{ item.name }}
                            </td>
                            <td>
                                <i nz-icon [nzType]="item.icon"></i>
                            </td>
                            <td>{{ item.sort }}</td>
                            <td>{{ item.path }}</td>
                            <td>{{ item.permission }}</td>
                            <!-- <td>{{ item.component }}</td> -->
                            <td>{{ item.cache ? "是":"否" }}</td>
                            <td>{{ item.hidden ? "否" : "是" }}</td>
                            <td>{{ item.createTime }}</td>
                            <td>
                                <button nz-button nzType="primary" style="margin-right: 4px;"
                                    (click)="handleShowModal(item)" *ngIf="bornRole.edit">
                                    <i nz-icon nzType="edit"></i>
                                </button>
                                <!-- <button nz-button nzType="danger" (click)="handleDelete([item.id])">
                                    <i nz-icon nzType="delete"></i>
                                </button> -->
                            </td>
                        </tr>
                    </ng-container>
                </ng-container>
            </tbody>
        </nz-table>
    </div>
</div>
<div id="modal_box"></div>
<nz-modal nzMaskClosable="false" appDragModal [nzGetContainer]="modalDomBox" [(nzVisible)]="isShowModal" [nzTitle]=" editId === -1 ? '新增菜单':'编辑菜单'" (nzOnCancel)="handleCancel()"
    [nzFooter]="null" class="hmodal">
    <div nz-row class="menu_type">
        <div nz-col [nzSpan]="4">菜单类型</div>
        <div nz-col [nzSpan]="20">
            <nz-radio-group [(ngModel)]="menuType" (ngModelChange)="menuTypeChange($event)" class="add_type_btn"
                [nzButtonStyle]="'solid'">
                <label nz-radio-button [nzValue]="0">目录</label>
                <label nz-radio-button [nzValue]="1">菜单</label>
                <label nz-radio-button [nzValue]="2">按钮</label>
            </nz-radio-group>
        </div>
    </div>
    <form nz-form [formGroup]="menuForm" (ngSubmit)="handleSubmit()">
        <nz-form-item *ngIf="menuType != 2">
            <nz-form-label [nzSpan]="4" nzRequired>图标</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请选择图标">
                <nz-select nzPlaceHolder="请选择" formControlName="icon" nzDropdownClassName="select_custom">
                    <nz-option nzLabel="strikethrough" nzValue="strikethrough"></nz-option>
                    <nz-option nzLabel="bg-colors" nzValue="bg-colors"></nz-option>
                    <nz-option nzLabel="ordered-list" nzValue="ordered-list"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="menuType != 2">
            <nz-form-label [nzSpan]="4">是否可见</nz-form-label>
            <nz-form-control [nzSpan]="20">
                <nz-radio-group formControlName="hidden" [nzButtonStyle]="'solid'" class="add_type_btn">
                    <label nz-radio-button [nzValue]="false">是</label>
                    <label nz-radio-button [nzValue]="true">否</label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="menuType == 1">
            <nz-form-label [nzSpan]="4">是否外链</nz-form-label>
            <nz-form-control [nzSpan]="20">
                <nz-radio-group formControlName="iframe" [nzButtonStyle]="'solid'" class="add_type_btn">
                    <label nz-radio-button [nzValue]="false">否</label>
                    <label nz-radio-button [nzValue]="true">是</label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="menuType == 1">
            <nz-form-label [nzSpan]="4">是否缓存</nz-form-label>
            <nz-form-control [nzSpan]="20">
                <nz-radio-group formControlName="cache" [nzButtonStyle]="'solid'" class="add_type_btn">
                    <label nz-radio-button [nzValue]="false">否</label>
                    <label nz-radio-button [nzValue]="true">是</label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="menuType != 2">
            <nz-form-label [nzSpan]="4" nzRequired>标题</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请输入标题">
                <input nz-input placeholder="请输入标题" formControlName="name" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="menuType == 2">
            <nz-form-label [nzSpan]="4" nzRequired>按钮名称</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请输入按钮名称">
                <input nz-input placeholder="请输入按钮名称" formControlName="name" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="menuType != 0">
            <nz-form-label [nzSpan]="4" nzRequired>权限标识</nz-form-label>
            <nz-form-control [nzSpan]="20" nzErrorTip="请输入权限标识">
                <input nz-input placeholder="请输入权限标识" formControlName="permission" />
            </nz-form-control>
        </nz-form-item>
        <div nz-row [nzGutter]="16" *ngIf="menuType != 2">
            <div nz-col nzSpan="12">
                <nz-form-item>
                    <nz-form-label [nzSpan]="8" nzRequired>路由地址</nz-form-label>
                    <nz-form-control [nzSpan]="16" nzErrorTip="请输入路由地址">
                        <input nz-input placeholder="请输入路由地址" formControlName="path" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col nzSpan="12">
                <nz-form-item>
                    <nz-form-label [nzSpan]="8" nzRequired>排序</nz-form-label>
                    <nz-form-control [nzSpan]="16" nzErrorTip="请输入排序">
                        <!-- <nz-input-number nzPlaceHolder="请输入排序" [nzMin]="1" [nzMax]="999" [nzStep]="1"
                            formControlName="sort">
                        </nz-input-number> -->
                        <input type="number" nz-input placeholder="请输入排序" formControlName="sort" />
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="4" [nzRequired]="menuType != 0">上级类目</nz-form-label>
                <nz-form-control [nzSpan]="20" nzErrorTip="请选择上级类目">
                    <nz-tree-select formControlName="pid" [nzNodes]="hztreeData"
                        [nzDropdownStyle]="{ 'max-height': '200px', 'left' : '-200px' }" nzPlaceHolder="请选择上级类目"
                        (ngModelChange)="handleHtree($event)"></nz-tree-select>
                </nz-form-control>
            </nz-form-item>
        </nz-form-item>
        <div nz-row class="custome_modal_footer">
            <div nz-col nzSpan="24" style="text-align: right;">
                <button nz-button type="button" nzType="default" (click)="handleCancel()">取消</button>
                <button nz-button nzType="primary" [nzLoading]="isOkLoading">确定</button>
            </div>
        </div>
    </form>
</nz-modal>